<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!-- 商品列表页 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="${ pageContext.request.contextPath }/lib/css/bootstrap.css">
    <link rel="stylesheet" href="${ pageContext.request.contextPath }/css/common.css">
    <link rel="stylesheet" href="${ pageContext.request.contextPath }/css/header.css">
    <link rel="stylesheet" href="${ pageContext.request.contextPath }/css/shopList.css">
    <link rel="shortcut icon" href="${ pageContext.request.contextPath }/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="${ pageContext.request.contextPath }/css/footer.css">
    <!-- fontawesome字体 -->
    <link rel="stylesheet" href="${ pageContext.request.contextPath }/css/font-awesome.min.css">
</head>

<body style="min-width: 400px;">

     <!-- 头部 start -->
     <div id="hs_header">
        <!-- 上部分 大屏幕才显示 -->
        <div class="top-bar d-none d-sm-none d-md-none d-lg-block text-center header">
            <div class="container">
                <div class="headerBox row">

                    <ul class="headerBox_left">
                        <li class="activate_font"><a href="${ pageContext.request.contextPath }//" class="activate_font">书瞳</a></li>
                        <c:if test="${ empty sessionScope.user }">
                        <li><a href="${ pageContext.request.contextPath }/index/login">登录</a></li>
                        <li><a href="${ pageContext.request.contextPath }/index/regist">注册</a></li>
                        </c:if>
                        <c:if test="${ !(empty sessionScope.user) }">
                        <li>您好，${user.username }</li>
                        <li><a href="${ pageContext.request.contextPath }/index/logout">退出</a></li>
                        </c:if>
                    </ul>

                    <ul class="headerBox_right">
                        <li><a href="star.html"><i class="fa fa-star activate_font"></i>&nbsp;&nbsp;收藏</a></li>
                        <li><a href="cart.html"><i class="fa fa-cart-plus activate_font"></i>&nbsp;&nbsp;购物车</a></li>
                        <li class="my">
                            <div>我的&nbsp;&nbsp;<i class="fa fa-caret-left activate_font"></i></div>
                            <ul class="mylist">
                                <li><a href="order.html">订单</a></li>
                                <li><a href="consignee.html">收货地址</a></li>
                                <li><a href="#" class="changePwd" data-toggle="modal" data-target="#changePwd">修改密码</a></li>
                            </ul>

                        </li>
                    </ul>

                </div>

            </div>
        </div>

        <!--下部分-->
        <!-- position-static 取消原来的相对定位 -->

        <nav class="navbar navbar-expand-lg navbar-light position-static container top-bar-2">
            <a class="navbar-brand d-flex justify-content-center align-items-center" href="${ pageContext.request.contextPath }//">
                <img src="${ pageContext.request.contextPath }/images/logo.png" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="${ pageContext.request.contextPath }//">首页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="${ pageContext.request.contextPath }/bookList">全部</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="${ pageContext.request.contextPath }/bookList/计算机">计算机</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="${ pageContext.request.contextPath }/bookList/文学">文学</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="${ pageContext.request.contextPath }/bookList/哲学">哲学</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="${ pageContext.request.contextPath }/bookList/历史">历史</a>
                    </li>

                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>

    </div>

    <!-- 修改密码框 -->
    <div class="modal fade" id="changePwd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">修改密码</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="changePwdForm">
                        <div class="form-group">
                            <label for="text1" class="col-form-label">新密码:</label>
                            <input type="text" class="form-control" id="text1" name="passwd">
                        </div>
                        <div class="form-group">
                            <label for="text2" class="col-form-label">确认密码:</label>
                            <input type="text" class="form-control" id="text2" name="repeat_passwd">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveChange">确认修改</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 头部 end -->

    
    <div id="hs_shopList">
        <div class="container">
            <hr>
            <div class="row">
            <c:forEach items="${books}" var="book">
                <div class="col-lg-3 col-sm-4 col-6 p-0">

                    <div class="card">
                        <a href="${ pageContext.request.contextPath }/bookDetail?bookID=${book.bookID}">
                            <img class="card-img-top" src="${ pageContext.request.contextPath }/img/${book.pictures}" alt="Card image cap">
                        </a>

                        <div class="card-body">
                            <a href="${ pageContext.request.contextPath }/bookDetail?bookID=${book.bookID}">
                                <p class="text-muted mb-0 mytitle">${book.bname }</p>
                            </a>
                            <p class="activate_font mb-0">￥<span class="font-size-28">${book.yourprice}</span>元</p>
                            <p class="text-muted mb-0 font-size-12 text-muted">月销量: 999</p>
                            <span class="toCart">&#xf217</span>
                        </div>
                    </div>
                    </a>
                </div>
                               
              </c:forEach>
            </div>
        </div>
    </div>


    <!-- 尾部 start -->
    <div id="hs_footer" class="mt-5">
        <div class="container">
            <div class="row d-flex justify-content-between align-items-center">
                <div class="col-lg-4 d-none d-sm-none d-md-none d-lg-block">
                    <div class="row  d-flex justify-content-center align-items-center">
                        <ul class="offset-lg-2 col-lg-4">
                            <li><a href="">关于我们</a></li>
                            <li><a href="">课程介绍</a></li>
                            <li><a href="">热门课程</a></li>
                        </ul>
                        <ul class="col-lg-4">
                            <li><a href="">名师授课</a></li>
                            <li><a href="">课堂互动</a></li>
                            <li><a href="">联系我们</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6 col-lg-5 text-center">
                    <h6>公司地址: 上海市松江区松江大学城</h6>
                    <h6>联系电话: 六个六</h6>
                    <h6>地址邮箱: admin@itlike.com</h6>
                </div>
                <div class="col-md-6 col-lg-3 d-none d-sm-none d-md-block">
                    <h6>联系我们:</h6>
                    <a href=""><img src="${ pageContext.request.contextPath }/images/weixin-h.png" width="50" alt="" data-toggle="tooltip"
                            data-placement="bottom" title="itlike001"></a>
                    <a href=""><img src="${ pageContext.request.contextPath }/images/xinlang-h.png" width="50" alt="" data-toggle="tooltip"
                            data-placement="bottom" title="weibo"></a>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 end -->

    <script src="${ pageContext.request.contextPath }/lib/js/jquery-3.3.1.js"></script>
    <script src="${ pageContext.request.contextPath }/lib/js/popper.js"></script>
    <script src="${ pageContext.request.contextPath }/lib/js/bootstrap.js"></script>
    <script src="${ pageContext.request.contextPath }/js/header.js"></script>

</body>

</html>